<template>
  <div>
       <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" ref="formInline" :rules="rules" 
            class="formInline" label-width="80px" slot="form">
                   <el-row :gutter="41">
                     <el-col :span="8">
                        <el-form-item label="省份">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="城市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" label-width="130px">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                 </el-row>
                 <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                 </el-row>
                  <div class="top-line">
                        <el-button type="primary" @click="submit('formInline')">查询</el-button>
                 </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="goToAdd">添加</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" v-loading="loading" >
                <!--<el-table-column type = "index" align="center" min-width="55">
                </el-table-column>-->
                <el-table-column label="省市区" align="center" min-width="160">
                     <template scope="scope">
                        {{!scope.row.location ? '--' : scope.row.location}}
                    </template>
                </el-table-column>
                <el-table-column label="学校名称" align="center"  min-width="120">
                    <template scope="scope">
                        {{!scope.row.schoolName ? '--' : scope.row.schoolName}}
                    </template>
                </el-table-column>
                <el-table-column label="公网IP" align="center" min-width="150">
                    <template scope="scope">
                        {{!scope.row.publicNetworkIp ? '--' : scope.row.publicNetworkIp}}
                    </template>
                </el-table-column>
                 <el-table-column label="端口" align="center" min-width="140">
                      <template scope="scope">
                        {{!scope.row.port ? '--' : scope.row.port}}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" min-width="100">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="update(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <updateSchool v-if = "updataData.dialogUpdata" :updataData.sync="updataData" @searchList="searchFetchData"> </updateSchool>
        <addSchool v-if = "addData.dialogUpdata" :addData.sync="addData" @searchList="searchFetchData"></addSchool>
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import updateSchool from './updateSchool';
import addSchool from './addSchool';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';

import { findSettlementConfigByPage } from 'api/deviceManagement';
export default {
    name: 'oneCardList',
    components: { TableLayout, province, city, region, updateSchool, addSchool, school},
    data() {
        return {
            formInline: {
                fProvinceId: '', // 省份
                fCityId: '', // 市区
                fAreaId: '', // 区县
                schoolId: '',
                schoolName: '',
                cameraNumber: '',
                schoolNameList: []
            },
            // 分页
            listQuery: {
                page: 1,
                total: 0
            },
            loading: false,
            schoolLoading: false,
            AnnounceList: [],
            rules: {
                // fProvinceId: [{ required: true, message: '请选择所在省' }]
            },
            // 点击修改 传给子组件
            updataData: {
                dialogUpdata: false,
                pId: '', //  pId
                schoolName: '',
                sNetIp: '',
                sPort: ''
            },
            addData: {
                dialogUpdata: false
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    created() {
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        // 打钩选时
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },

        submit(formInline) {
            // this.$refs[formInline].validate((valid) => {
                // if (valid) {
            this.listQuery.page=1;
            this.searchFetchData();
                // } else {
                //     return false;
                // }
            // });
        },

        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val;
        },
         // 查询列表
        searchFetchData() {
            let page = this.listQuery.page;
            let rows = this.config.pageSize;
            let provinceId=this.formInline.fProvinceId;
            let cityId=this.formInline.fCityId;
            let areaId=this.formInline.fAreaId;
            let sSchoolId=this.formInline.schoolId;
            this.loading = true;
            findSettlementConfigByPage(page, rows, provinceId, cityId, areaId, sSchoolId).then(res => {
                this.loading = false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            });
        },
        // 点击修改 传送参数
        update(row) {
            this.updataData.dialogUpdata = true;
            this.updataData.pId = row.id;// 记录id

            this.updataData.schoolName = row.schoolName;// 记录学校名字
            this.updataData.sNetIp = row.publicNetworkIp;// 记录公网ip
            this.updataData.sPort = row.port;// 记录端口
        },

        // 添加
        goToAdd() {
            this.addData.dialogUpdata = true;
        }
       
    }
}
</script>
<style lang="scss" scoped>
// .el-message-box{
//     .el-message-box__content{
//         padding:20px 0px 30px;
//         .el-message-box__message {
//             p {
//                 font-size: 18px;
//                 color: #333;
//                 text-align: center;
//             }
//         }
//     }
//     .el-message-box__btns {
//         text-align: center;
//         padding-bottom:30px;
//     }
// }
 
 .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
</style>